<template>
  <div>
    <el-card v-loading='isLoading' >
      <div>
        <span>用户信息</span>
        <div class="item" >
          <el-row >
            <el-col :span="4">手机号</el-col>
            <el-col :span="8">{{userInfo.phone}}</el-col>
            <el-col :span="4">用户姓名</el-col>
            <el-col :span="8">{{userInfo.name}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">状态</el-col>
            <el-col :span="8">{{userInfo.status===1?'正常':'不正常'}}</el-col>
            <el-col :span="4">注册时间</el-col>
            <el-col :span="8">{{userInfo.createTime}}</el-col>
          </el-row>
        </div>
      </div>
      <div>
        <span>认证信息</span>
        <div class="item" >
          <el-row >
            <el-col :span="4">姓名</el-col>
            <el-col :span="8">{{userInfo.name}}</el-col>
            <el-col :span="4">证件类型</el-col>
            <el-col :span="8">{{userInfo.certificatesType=='10'?'身份证':userInfo.certificatesType=='20'?'户口本':''}}</el-col>
          </el-row>
          <el-row>
            <el-col class="img" :span="4">证件号</el-col>
            <el-col class="img" :span="8">{{userInfo.certificatesNo}}</el-col>
            <el-col class="img" :span="4">证件图片</el-col>
            <el-col class="img" :span="8">
              <el-image
                style="width: 100px; height: 100px"
                :src="userInfo.certificatesUrl"
                ></el-image>
            </el-col>
          </el-row>
        </div>
      </div>

      <span>就诊人信息</span>
      <el-table border style="margin:20px 0" >
        <el-table-column label="序号" type="index" width="60px" style="background-color: blanchedalmond;" ></el-table-column>
        <el-table-column label="姓名" ></el-table-column>
        <el-table-column label="证件类型" ></el-table-column>
        <el-table-column label="证件编号" ></el-table-column>
        <el-table-column label="性别" ></el-table-column>
        <el-table-column label="出生年月" ></el-table-column>
        <el-table-column label="手机" ></el-table-column>
        <el-table-column label="是否结婚" ></el-table-column>
        <el-table-column label="地址" ></el-table-column>
        <el-table-column label="注册时间" ></el-table-column>
      </el-table>

      <el-button  @click="toBackHD" >返回</el-button>
    </el-card>

  </div>
</template>

<script>
import {reqUserShowInfoHD} from '@/api/userInfo'

export default {
  name: "Show",
  data(){
    return{
      id:'',
      formTo:'',
      userInfo:{},
      isLoading:false
    }
  },
  mounted(){
    // console.log(this.$route);
    const {id,form} = this.$route.query
    this.id = id,
    this.formTo = form

    // 初始化数据
    this.getUserShowInfoHD()
  },
  methods: {
    // 1.返回来的界面
    toBackHD(){
      this.$router.push({
        name:this.formTo
      })
    },
    // 2.获取用户信息
    async getUserShowInfoHD(){
      this.isLoading = true
      try {
        const res = await reqUserShowInfoHD(this.id)
        // console.log(res);
        this.userInfo = res.data.userInfo

        this.isLoading = false
      } catch (error) {
        this.isLoading = false
      }
    },
  },
};
</script>

<style scoped>
.item{
  margin: 20px 0;
}
.el-col{
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border: 1px solid #c9c6c645;
}
.el-col-4{
  background-color: #eee;
}
.img{
  /* background-color: #832020; */
  height: 100px;
  line-height: 100px;
}
</style>
